{% extends "_layouts/examples.html" %}
{% block title %}Image Container / Aspect Ratio / Responsive / All{% endblock %}

{% block standalone_css %}patterns_image{% endblock %}

{% block content %}
  <section>
    <span>Cinematic on large, 16:9 on medium, 2:3 on small</span>
    {% include 'docs/examples/patterns/image/container/aspect-ratio/responsive.html' %}
  </section>

  <section>
    <span>Cinematic on large, 16:9 on medium</span>
    <div class="p-image-container--cinematic-on-large p-image-container--16-9-on-medium is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

  <section>
    <span>Cinematic on large, 2:3 on small</span>
    <div class="p-image-container--cinematic-on-large p-image-container--2-3-on-small is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

  <section>
    <span>16:9 on medium, 2:3 on small</span>
    <div class="p-image-container--16-9-on-medium p-image-container--2-3-on-small is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

  <section>
    <span>Cinematic on large</span>
    <div class="p-image-container--cinematic-on-large is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

  <section>
    <span>Cinematic on large, 16:9 on medium</span>
    <div class="p-image-container--cinematic-on-large p-image-container--16-9-on-medium is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

  <section>
    <span>Cinematic on large, 2:3 on small</span>
    <div class="p-image-container--cinematic-on-large p-image-container--2-3-on-small is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

  <section>
    <span>16:9 on medium</span>
    <div class="p-image-container--16-9-on-medium is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

  <section>
    <span>16:9 on medium, 2:3 on small</span>
    <div class="p-image-container--16-9-on-medium p-image-container--2-3-on-small is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

  <section>
    <span>2:3 on small</span>
    <div class="p-image-container--2-3-on-small is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

  <section>
    <span>16:9 on medium</span>
    <div class="p-image-container--16-9-on-medium is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

  <section>
    <span>Cinematic on large, 16:9 on medium, 2:3 on small</span>
    <div class="p-image-container--cinematic-on-large p-image-container--16-9-on-medium p-image-container--2-3-on-small is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

  <section>
    <span>Cinematic on large, 16:9 on medium</span>
    <div class="p-image-container--cinematic-on-large p-image-container--16-9-on-medium is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

  <section>
    <span>Cinematic on large, 2:3 on small</span>
    <div class="p-image-container--cinematic-on-large p-image-container--2-3-on-small is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

  <section>
    <span>16:9 on medium, 2:3 on small</span>
    <div class="p-image-container--16-9-on-medium p-image-container--2-3-on-small is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

  <section>
    <span>16:9 on medium</span>
    <div class="p-image-container--16-9-on-medium is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

  <section>
    <span>2:3 on small</span>
    <div class="p-image-container--2-3-on-small is-highlighted">
      <img class="p-image-container__image"
           src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>

{% endblock %}
